<template>
  <div class="favorites">
    <!-- 搜索栏 -->
    <div class="search-box">
      <i class="iconfont icon-search"></i>
      <input type="text" placeholder="搜索收藏内容" v-model="searchQuery">
    </div>

    <!-- 收藏分类标签 -->
    <div class="category-tabs">
      <div 
        v-for="tab in tabs" 
        :key="tab.type"
        :class="['tab-item', { active: currentTab === tab.type }]"
        @click="currentTab = tab.type"
      >
        <i :class="['iconfont', tab.icon]"></i>
        <span>{{ tab.name }}</span>
      </div>
    </div>

    <!-- 收藏列表 -->
    <div class="favorites-list">
      <template v-if="filteredItems.length">
        <div 
          v-for="item in filteredItems" 
          :key="item.id"
          class="favorite-item"
          @click="openItem(item)"
        >
          <!-- 消息类型 -->
          <template v-if="item.type === 'message'">
            <div class="item-header">
              <img :src="item.avatar" :alt="item.sender" class="avatar">
              <span class="sender">{{ item.sender }}</span>
              <span class="time">{{ item.time }}</span>
            </div>
            <div class="item-content message-content">
              {{ item.content }}
            </div>
          </template>

          <!-- 文件类型 -->
          <template v-else-if="item.type === 'file'">
            <div class="item-header">
              <i class="iconfont icon-file"></i>
              <span class="filename">{{ item.filename }}</span>
              <span class="filesize">{{ item.size }}</span>
            </div>
            <div class="item-actions">
              <button @click.stop="downloadFile(item)">
                <i class="iconfont icon-download"></i>
                下载
              </button>
            </div>
          </template>

          <!-- 链接类型 -->
          <template v-else-if="item.type === 'link'">
            <div class="item-header">
              <i class="iconfont icon-link"></i>
              <span class="link-title">{{ item.title }}</span>
            </div>
            <div class="item-content link-content">
              <div class="link-url">{{ item.url }}</div>
              <div class="link-desc">{{ item.description }}</div>
            </div>
          </template>

          <!-- 图片类型 -->
          <template v-else-if="item.type === 'image'">
            <div class="item-header">
              <i class="iconfont icon-image"></i>
              <span class="image-title">{{ item.title }}</span>
            </div>
            <div class="item-content image-content">
              <img :src="item.url" :alt="item.title">
            </div>
          </template>

          <div class="item-footer">
            <div class="tags">
              <span v-for="tag in item.tags" :key="tag" class="tag">
                {{ tag }}
              </span>
            </div>
            <div class="actions">
              <i class="iconfont icon-delete" @click.stop="removeFromFavorites(item)"></i>
              <i class="iconfont icon-share" @click.stop="shareItem(item)"></i>
            </div>
          </div>
        </div>
      </template>
      
      <div v-else class="empty-state">
        <i class="iconfont icon-empty"></i>
        <p>暂无收藏内容</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const searchQuery = ref('')
const currentTab = ref('all')

// 分类标签
const tabs = [
  { type: 'all', name: '全部', icon: 'icon-all' },
  { type: 'message', name: '消息', icon: 'icon-message' },
  { type: 'file', name: '文件', icon: 'icon-file' },
  { type: 'link', name: '链接', icon: 'icon-link' },
  { type: 'image', name: '图片', icon: 'icon-image' }
]

// 收藏数据
const favorites = ref([
  {
    id: 1,
    type: 'message',
    sender: '张三',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=felix',
    content: '这是一条重要的消息内容',
    time: '2024-03-10 10:30',
    tags: ['重要', '工作']
  },
  {
    id: 2,
    type: 'file',
    filename: '项目文档.pdf',
    size: '2.5MB',
    url: '/files/doc.pdf',
    time: '2024-03-09',
    tags: ['文档', '项目']
  },
  {
    id: 3,
    type: 'link',
    title: '技术文章',
    url: 'https://example.com/article',
    description: '一篇关于Vue3的技术文章',
    time: '2024-03-08',
    tags: ['Vue', '学习']
  },
  {
    id: 4,
    type: 'image',
    title: '项目截图',
    url: 'https://api.dicebear.com/7.x/identicon/svg?seed=screenshot',
    time: '2024-03-07',
    tags: ['截图', '设计']
  }
])

// 过滤收藏内容
const filteredItems = computed(() => {
  let items = favorites.value
  
  // 按分类过滤
  if (currentTab.value !== 'all') {
    items = items.filter(item => item.type === currentTab.value)
  }
  
  // 按搜索关键词过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    items = items.filter(item => {
      const searchFields = {
        message: ['content', 'sender'],
        file: ['filename'],
        link: ['title', 'url', 'description'],
        image: ['title']
      }[item.type] || []

      return searchFields.some(field => 
        item[field]?.toLowerCase().includes(query)
      ) || item.tags.some(tag => 
        tag.toLowerCase().includes(query)
      )
    })
  }
  
  return items
})

// 打开收藏项
const openItem = (item) => {
  console.log('Opening item:', item)
  // 根据不同类型处理打开逻辑
}

// 下载文件
const downloadFile = (item) => {
  console.log('Downloading file:', item)
  // 实现文件下载逻辑
}

// 从收藏移除
const removeFromFavorites = (item) => {
  const index = favorites.value.findIndex(f => f.id === item.id)
  if (index !== -1) {
    favorites.value.splice(index, 1)
  }
}

// 分享收藏
const shareItem = (item) => {
  console.log('Sharing item:', item)
  // 实现分享逻辑
}
</script>

<style scoped>
.favorites {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
}

.category-tabs {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #e6e6e6;
  background: #f5f7fb;
}

.tab-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 20px;
  margin-right: 8px;
  transition: all 0.3s;
}

.tab-item i {
  margin-right: 4px;
  font-size: 16px;
}

.tab-item:hover {
  background: #e3f2fd;
}

.tab-item.active {
  background: #1976d2;
  color: white;
}

.favorites-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.favorite-item {
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.favorite-item:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.item-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
}

.sender {
  font-weight: 500;
  margin-right: auto;
}

.time {
  color: #999;
  font-size: 12px;
}

.item-content {
  margin-bottom: 12px;
  color: #333;
  line-height: 1.5;
}

.image-content img {
  max-width: 100%;
  border-radius: 4px;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tags {
  display: flex;
  gap: 8px;
}

.tag {
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: #666;
}

.actions {
  display: flex;
  gap: 12px;
}

.actions i {
  cursor: pointer;
  color: #666;
  transition: color 0.3s;
}

.actions i:hover {
  color: #1976d2;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
}

.item-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.item-actions button {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background: #1976d2;
  color: white;
  cursor: pointer;
}

.item-actions button i {
  margin-right: 4px;
}

.link-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.link-url {
  color: #1976d2;
  font-size: 14px;
}

.link-desc {
  color: #666;
  font-size: 12px;
}
</style> 